import { Form, Input, Modal } from "antd";
import FileSelector from "@/components/FileSelector";
import UploadIcon from "@/assets/icons/upload.svg?jsx";
import clsm from "@/lib/utils/clsm";
import { forwardRef, useImperativeHandle, useRef } from "react";

type AddDatasetModalProps = {
  visible: boolean;
  onVisibleChange: (v: boolean) => void;
  type: "file" | "url";
};

type FormModel = {
  confirm: () => Promise<void>;
};

export default function AddDatasetModal(props: AddDatasetModalProps) {
  const { visible, onVisibleChange, type } = props;
  const formRef = useRef<FormModel>(null);
  return (
    <Modal open={visible} title="上传" onCancel={() => onVisibleChange(false)}>
      {type === "file" && <FileUploadForm ref={formRef} />}
      {type === "url" && <UrlUploadForm ref={formRef} />}
    </Modal>
  );
}

const FileUploadForm = forwardRef<FormModel>(
  function FileUploadForm(props, ref) {
    useImperativeHandle(ref, () => {
      return {
        async confirm() {},
      };
    }, []);

    return (
      <FileSelector
        className={({ isDragOver }) =>
          clsm(
            "flex h-36 flex-col items-center justify-center py-6",
            isDragOver && "rounded border border-dashed border-sky-500",
          )
        }
      >
        {(file) =>
          file ? (
            <p className="text-xs">已选择：{file.name}</p>
          ) : (
            <>
              <UploadIcon className="size-10 text-sky-500" />
              <p className="my-1 text-xs">点击或将文件拖拽到这里上传</p>
              <p className="text-xs text-zinc-500">
                支持扩展名：.rar .zip .doc .docx .pdf .jpg
              </p>
            </>
          )
        }
      </FileSelector>
    );
  },
);

const UrlUploadForm = forwardRef<FormModel>(function UrlUploadForm(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      async confirm() {},
    };
  }, []);

  return (
    <div className="py-10">
      <Form>
        <Form.Item label="url">
          <Input />
        </Form.Item>
      </Form>
    </div>
  );
});
